<template>
<div>
    <div class="header">
        <img src="../assets/images/nb_coin.png" alt="">
        <input type="text" placeholder="搜索商品或品牌">
        </div>
        <div class="nav" ref="wrapper">
            <ul>
                <li v-for="(item,index) in infoArr" :key="index" @click="handleItemIndex(index)">{{item}}</li>
            </ul>
        </div>
        <div class="bar">
            <div :style="{transform:'translate('+transX+'px)'}"></div>
        </div>
        <div class="box">
                <span class="iconfont icon-sangedian-hei"></span>
        </div>
        <div class="select">
            <div class="shai">
                <ul>
                    <li>综合</li>
                    <li @click="sort=!sort">价格</li>
                    <li>推荐</li>
                    <li>筛选</li>
                </ul>
            </div>
            <div class="pailie">
                <span class="iconfont icon-quanbu"></span>
            </div>
        </div>
        <div class="shangpin" ref="wrapp">
            <div v-for="(item,index) in itemsList" :key="index" @click="handleItemIfo(item)">
                <img :src="item.ItemImagePath" alt="" >
                <h2>{{item.VariantName}}</h2>
                <i>￥<span>{{item.NowPrice}}.00</span></i>
                <p @click.stop="handleCart(item)">+</p>
            </div>
        </div>
</div>
    
    
</template>
<script>
    import Vue from 'vue'
    import BScroll from '@better-scroll/core'
    import {getClassifyData,getSortList} from '../api/getgoods'
    import {Toast} from 'vant'
    export default {
        name:'ChanPin',
        component:{
        },
        data() {
            return {
                transX:0,
                itemsList:[],
                infoArr:['白酒','葡萄酒','啤酒','黄酒','洋酒','饮料','酒具','茶叶','物料'],
                sort:true
            }
        },
        created () {
            getClassifyData(0).then(res=>{
                this.itemsList=res.data
            });
        },
        mounted  () {
                var bs =new BScroll(this.$refs.wrapper,{
                scrollX:true,
                probeType:3,
                click:true
                })
                var a=420//420代表ul宽度-nav宽度
                bs.on('scroll', (position) => {
                var sx=Math.abs(position.x)
                var x=(sx/a)*270
                this.transX=x
                })
            },
        methods: {
            handleItemIndex(idx) {
                this.$store.commit('Classify/setIndex',idx)
            },
            handleItemIfo(item){//打开商品详情页面
                this.$router.push({
                    path:'/detail',
                    query:{
                        item
                    }
                })
            },
            handleCart(item){
                Vue.set(item,'itemNum',1)
                this.$store.commit('cart/addCart',item)
                Toast.success('加购成功')
            }
        },
        computed: {
            getItemIndex() {
                return this.$store.getters['Classify/getIndex'] 
            }
        },
        watch:{
            getItemIndex(newvalue){
                getClassifyData(newvalue).then(res=>{
                    this.itemsList=res.data
                })
            },
            sort(newvalue){
                let idx =this.$store.getters['Classify/getIndex']
                let obj={
                    index:idx,
                    sortId:newvalue
                }
                getSortList(obj).then(res=>{
                    this.itemsList=res.data
                })
            }
        }
}
</script>
<style scoped lang="css" src="../assets/css/classify.css"></style>
<style scoped lang="css" src="../assets/css/reset.css"></style>
<style lang="sass" scoped>
</style>